<template>
  <el-card class="box-card card-main" shadow="never">
    <div slot="header">
      <el-row>
        <el-button size="mini" @click="$router.go(-1)">返回</el-button>
        <el-button type="success" size="mini" @click="addRow()">新增</el-button>
        <el-button type="primary" size="mini" @click="save('formDom')">保存</el-button>
        <el-button type="primary" plain size="mini" @click="getListByCaseId()">刷新</el-button>
      </el-row>
    </div>
    <el-form ref="formDom" :rules="formData.rules" :model="formData" size="small">
      <el-table :data="formData.tableData" border stripe size="small" style="width: auto">
        <el-table-column width="180" prop="name" label="描述">
          <template slot-scope="scope">
            <el-form-item
              v-if="scope.row.edit"
              :prop="'tableData.' + scope.$index + '.name'"
              :rules="formData.rules.name"
            >
              <el-input v-model="scope.row.name" placeholder="描述" />
            </el-form-item>
            <span v-else>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column width="150" prop="action" label="动作Action">
          <template slot-scope="scope">
            <el-form-item
              v-if="scope.row.edit"
              :prop="'tableData.' + scope.$index + '.action'"
              :rules="formData.rules.action"
            >
              <!-- <el-input v-model="scope.row.action" placeholder="动作Action"></el-input> -->
              <el-select v-model="scope.row.action" clearable filterable placeholder="请选择Action">
                <el-option
                  v-for="item in dictValueList"
                  :key="item.key"
                  :label="item.key"
                  :value="item.key"
                >
                  <span style="float: left;width:110px">{{ item.key }}</span>
                  <span style="float: left; color: #777272; font-size: 12px">{{ item.name }}</span>
                </el-option>
              </el-select>
            </el-form-item>
            <span v-else>{{ scope.row.action }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="页面元素">
          <template slot-scope="scope">
            <el-form-item
              v-if="scope.row.edit"
              :prop="'tableData.' + scope.$index + '.path'"
              :rules="formData.rules.path"
            >
              <el-autocomplete
                v-model="scope.row.path"
                class="inline-input"
                style="width:100%"
                :fetch-suggestions="ByType"
                placeholder="请输入内容"
              />
            </el-form-item>
            <span v-else>{{ scope.row.path }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="optionData" label="操作数据/结果">
          <template slot-scope="scope">
            <el-form-item
              v-if="scope.row.edit"
              :prop="'tableData.' + scope.$index + '.optionData'"
              :rules="formData.rules.optionData"
            >
              <el-input v-model="scope.row.optionData" placeholder="操作数据/结果" />
            </el-form-item>
            <span v-else>{{ scope.row.optionData }}</span>
          </template>
        </el-table-column>
        <el-table-column width="110" prop="type" label="步骤类型">
          <template slot-scope="scope">
            <el-form-item
              v-if="scope.row.edit"
              :prop="'tableData.' + scope.$index + '.type'"
              :rules="formData.rules.type"
            >
              <el-select v-model="scope.row.type" placeholder="步骤类型">
                <el-option label="WebUI" :value="1" />
                <el-option label="接口" :value="3" />
              </el-select>
            </el-form-item>
            <span v-else>{{ scope.row.type === 1?"WebUI":"接口" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" fixed="right">
          <template slot-scope="scope">
            <el-form-item v-if="scope.row.edit">
              <el-button
                icon="el-icon-check"
                size="mini"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                type="success"
                circle
                @click="subRow(scope.row)"
              />
              <el-button
                icon="el-icon-plus"
                size="mini"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                type="primary"
                circle
                @click="addRow(scope.row , scope.$index)"
              />
              <el-button
                icon="el-icon-minus"
                type="danger"
                size="mini"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                circle
                @click="deleteRow(scope.row , scope.$index)"
              />
              <el-button
                icon="el-icon-upload2"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                size="mini"
                type="primary"
                circle
                @click="upGo(scope.$index)"
              />
              <el-button
                icon="el-icon-download"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                type="primary"
                size="mini"
                circle
                @click="downGo(scope.$index)"
              />
            </el-form-item>
            <template v-if="!scope.row.edit">
              <el-button
                icon="el-icon-edit"
                size="mini"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                type="success"
                circle
                @click="scope.row.edit=!scope.row.edit"
              />
              <el-button
                icon="el-icon-plus"
                size="mini"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                type="primary"
                circle
                @click="addRow(scope.row , scope.$index)"
              />
              <el-button
                icon="el-icon-minus"
                type="danger"
                size="mini"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                circle
                @click="deleteRow(scope.row , scope.$index)"
              />
              <el-button
                icon="el-icon-upload2"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                size="mini"
                type="primary"
                circle
                @click="upGo(scope.$index)"
              />
              <el-button
                icon="el-icon-download"
                style="padding: 3px 4px 3px 4px;margin: 1px"
                type="primary"
                size="mini"
                circle
                @click="downGo(scope.$index)"
              />
            </template>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </el-card>
</template>

<script>
import { requestTestSteps, requestAddTestSteps } from '@/api/testStep/ui'
import { requestDictValueList } from '@/api/sys/dict'
import { successMessage } from '@/utils/message'
export default {
  data() {
    return {
      formData: {
        rules: {
          name: { type: 'string', required: true, message: '必填字段', trigger: 'blur' },
          action: { type: 'string', required: true, message: '必填字段', trigger: 'blur' }
        },
        tableData: [{
          name: '',
          testcaseId: this.$route.query.id,
          action: '',
          path: '',
          optionData: '',
          type: 1
        }]
      },
      dictValueList: [],
      byType: [{ 'value': 'id|' }, { 'value': 'name|' }, { 'value': 'xpath|' }, { 'value': 'cssSelector|' }, { 'value': 'className|' }, { 'value': 'tagName|' }, { 'value': 'linkText|' }, { 'value': 'partialLinkText|' }, { 'value': 'jiekou|' }]
    }
  },
  mounted() {
    this.getListByCaseId()
    this.getDictValueList()
  },
  methods: {
    subRow(row) {
      this.$refs['formDom'].validate((valid, model) => {
        if (valid) {
          row.edit = !row.edit
        }
      })
    },
    ByType(queryString, cb) {
      var restaurants = this.byType
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants
      // 调用 callback 返回建议列表的数据
      cb(results)
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    addRow(row, index) {
      var list = {
        name: '',
        testcaseId: this.$route.query.id,
        action: '',
        path: '',
        optionData: '',
        type: 1,
        edit: true
      }
      // console.log(index)
      if (index || index === 0) {
        this.formData.tableData.splice(index + 1, 0, list)
      } else {
        this.formData.tableData.push(list)
      }
    },
    deleteRow(row, index) {
      this.formData.tableData.splice(index, 1)
    },
    upGo(index) {
      if (index !== 0) {
        const v1 = this.formData.tableData[index]
        const v2 = this.formData.tableData[index - 1]
        this.formData.tableData.splice(index, 1, v2)
        this.formData.tableData[index - 1] = v1
      }
    },
    downGo(index) {
      if (index !== this.formData.tableData.length - 1) {
        const v1 = this.formData.tableData[index]
        const v2 = this.formData.tableData[index + 1]
        this.formData.tableData.splice(index, 1, v2)
        this.formData.tableData[index + 1] = v1
      }
    },
    save(formName) { // 保存
      this.$refs[formName].validate((valid, model) => {
        if (valid) {
          this.$confirm('是否保存测试步骤继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            requestAddTestSteps(this.formData.tableData).then((result) => {
              this.getListByCaseId()
              successMessage('保存测试步骤成功')
            })
          }).catch(() => {
            this.$message({
              type: 'success',
              message: '已取消保存'
            })
          })
        }
      })
    },
    getListByCaseId() {
      requestTestSteps(this.$route.query.id).then((result) => {
        this.$refs['formDom'].resetFields()
        this.formData.tableData = result.map(v => {
          v.edit = false
          return v
        })
      })
    },
    getDictValueList() {
      // 获取UI自动化操作列表
      requestDictValueList(5).then((result) => {
        this.dictValueList = result
      })
    }
  }
}
</script>

<style scoped>
.a {
  color: #777272;
}
/* 表单校验样式 */
.el-form-item:not(.is-error) {
  margin-bottom: 0px;
}
</style>
